<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>字典管理</title>
	<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
	<link rel="stylesheet" href="../../lib/vxe-table/index.css">
	<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
	<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../../lib/zTree/css/metroStyle/metroStyle.css">
	<link rel="stylesheet" href="../../static/css/skins.css">
	<script type="text/javascript" src="../../lib/vue/vue.js"></script>
	<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
	<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
	<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
	<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.min.js"></script>
	<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../lib/zTree/js/jquery.ztree.all.min.js"></script>
	<script type="text/javascript" src="../../static/js/MD5/Base64.js"></script>
	<script type="text/javascript" src="../../static/js/MD5/md5.js"></script>
	<script type="text/javascript" src="../../static/js/webApi.js"></script>
	<script type="text/javascript" src="../../static/js/tool.js"></script>
	<style type="text/css">
		/*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
		html,
		body,
		#app,
		.el-container {
			/*设置内部填充为0，几个布局元素之间没有间距*/
			padding: 0px;
			/*外部间距也是如此设置*/
			margin: 0px;
			/*统一设置高度为100%*/
			height: 100%;
		}

		.el-main {
			padding: 4px;
		}

		.el-cascader-menu__wrap {
			min-height: 300px
		}
		.el-icon-search{
			color: #409EFF;
		}
		.el-icon-refresh-right{
			color: #409EFF;
		}
		[v-cloak] {
			display: none;
		}
		#elForm_lable{
			width: 24%;
		}
		#elForm_lable_input{
			width: 250px!important;
		}
		#elForm_button{
			position: absolute;
			right: 27px;
			padding-top: 50px;
		}
	</style>
</head>

<body class="skin-blue skin-del">
	<el-container id="app">
		<el-main>
			<el-form :inline="true" :model="queryData" ref="queryData" label-width="50px" label-position="right"
				size="mini" @submit.native.prevent style="height: 36px;" >
				<el-form-item label="字典类型名称" >
					<el-input v-model="queryData.dictName" placeholder="请输入字典类型名称" ></el-input>
				</el-form-item>
				<el-form-item >
				    <el-button size="mini" icon="el-icon-search" @click="searchEventB">查询</el-button>
				    <el-button size="mini" icon="el-icon-refresh-right" @click="searchEventA">重置</el-button>
				</el-form-item>
			</el-form>

			<vxe-grid border ref="xGrid" resizable show-overflow highlight-current-row="true" keep-source
				@page-change="handlePageChange" :height="tableHeight" size="mini" :data="gridData"
				:loading="tableLoading" :header-cell-style="{'text-align':'center','font-size': tableFontSize}"
				:row-style="{'font-size': tableFontSize}" :radio-config="tableRadio" :pager-config="tablePage"
				:toolbar="tableToolbar" :export-config="tableExport" @cell-dblclick="cellDBLClickEvent"
				@cell-click="cellClick" :edit-config="{trigger:'click', mode:'row'}"
				@toolbar-button-click="toolbarButtonClickEvent" :sort-config="{remot:true}"
				@sort-change="tableSortChange" @radio-change="changeId">
				<vxe-table-column type="radio" width="60" align="center"></vxe-table-column>
				<vxe-table-column field="id" title="id" width="80" align="right">
				</vxe-table-column>
				<vxe-table-column field="dictCode" title="字典类型编码" width="200" align="left">
				</vxe-table-column>
				<vxe-table-column field="dictName" title="字典类型名称" width="200" align="left">
				</vxe-table-column>
				<vxe-table-column field="description" title="描述" width="355" align="left">
				</vxe-table-column>
				<vxe-table-column field="createBy" title="创建人" width="150" align="left">
				</vxe-table-column>
				<vxe-table-column field="createTime" title="创建时间" width="150" align="right">
				</vxe-table-column>
			</vxe-grid>
			<!-- 新增的模态框 -->
			<vxe-modal ref="xModal" v-model="showEdit" width="900" :loading="submitLoading" resize destroy-on-close title="新增">
				<el-form :model="formData" :rules="formRules" ref="formData" label-width="100px" label-position="right"
					size="mini">
					<el-row>
						<el-col span="12">
							<el-form-item label="字典编码" prop="dictCode">
								<el-input type="text" v-model="formData.dictCode" placeholder="请输入编码，保存后将无法修改编码！"
									maxlength="32" :disabled="selectRow!=null"></el-input>
							</el-form-item>
						</el-col>
						<el-col span="12">
							<el-form-item label="字典名称" prop="dictName">
								<el-input type="" style="display:none;"></el-input>
								<el-input type="text" v-model="formData.dictName" placeholder="请输入名称" maxlength="32">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col span="12">
							<el-form-item label="描述" prop="description">
								<el-input type="" style="display:none;"></el-input>
								<el-input type="text" v-model="formData.description" placeholder="请输入描述" maxlength="32">
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col span="24">
							<el-form-item style="text-align: right;">
								<el-button type="primary" icon="el-icon-folder" @click="submitEvent('formData')"
									:disabled="disabled" v-cloak>保存
								</el-button>
								<el-button type="warning" icon="el-icon-refresh" @click="resetEvent('formData')"
									v-cloak>重置
								</el-button>
								<el-button type="warning" icon="el-icon-switch-button" @click="closeEvent('formData')"
									v-cloak>退出
								</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</vxe-modal>
			<!-- 编辑的模态框 -->
			<vxe-modal ref="xModal" v-model="showEditA" width="900" :loading="submitLoading" resize destroy-on-close title="修改">
				<el-form :model="formData" :rules="formRules" ref="formData" label-width="100px" label-position="right"
					size="mini">
					<el-row>
						<el-col span="12">
							<el-form-item label="字典编码" prop="dictCode">
								<el-input type="text" v-model="formData.dictCode" placeholder="请输入编码，保存后将无法修改编码！"
									maxlength="32"></el-input>
							</el-form-item>
						</el-col>
						<el-col span="12">
							<el-form-item label="字典名称" prop="dictName">
								<el-input type="" style="display:none;"></el-input>
								<el-input type="text" v-model="formData.dictName" placeholder="请输入名称" maxlength="32">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col span="12">
							<el-form-item label="描述" prop="description">
								<el-input type="" style="display:none;"></el-input>
								<el-input type="text" v-model="formData.description" placeholder="请输入描述" maxlength="32">
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col span="24">
							<el-form-item style="text-align: right;">
								<el-button type="primary" icon="el-icon-folder" @click="submitEventNew('formData')"
									:disabled="disabled" v-cloak>保存
								</el-button>
								<el-button type="warning" icon="el-icon-refresh" @click="resetEvent('formData')"
									v-cloak>重置
								</el-button>
								<el-button type="warning" icon="el-icon-switch-button" @click="closeEvent('formData')"
									v-cloak>退出
								</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</vxe-modal>
		</el-main>
		<!-- 树状图的新增模态框 -->
		<vxe-modal ref="xModal" v-model="showEditB" width="900" :loading="submitLoading" resize destroy-on-close>
			<el-form :model="formDataA" :rules="formRules" ref="formDataA" label-width="100px" label-position="right"
				size="mini">
				<el-row>
					<el-col span="12">
						<el-form-item label="字典名称" prop="itemText">
							<el-input type="" style="display:none;"></el-input>
							<el-input type="text" v-model="formDataA.itemText" placeholder="请输入名称" maxlength="32">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col span="12">
						<el-form-item label="字典值" prop="itemValue">
							<el-input type="" style="display:none;"></el-input>
							<el-input type="text" v-model="formDataA.itemValue" placeholder="请输入描述" maxlength="32">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col span="12">
						<el-form-item label="描述" prop="description">
							<el-input type="" style="display:none;"></el-input>
							<el-input type="text" v-model="formDataA.description" placeholder="请输入描述" maxlength="32">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col span="12">
						<el-form-item label="排序" prop="sortOrder">
							<el-input type="" style="display:none;"></el-input>
							<el-input type="number" v-model="formDataA.sortOrder" placeholder="请输入排序"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col span="24">
						<el-form-item style="text-align: right;">
							<el-button type="primary" icon="el-icon-folder" @click="submitEventNewA('formDataA')"
								:disabled="disabled" v-cloak>保存
							</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</vxe-modal>
		<!-- 树状图修改 -->
		<vxe-modal ref="xModal" v-model="showEditC" width="900" :loading="submitLoading" resize destroy-on-close>
			<el-form :model="formDataB" :rules="formRules" ref="formDataB" label-width="100px" label-position="right"
				size="mini">
				<el-row>
					<el-col span="12">
						<el-form-item label="字典名称" prop="itemText">
							<el-input type="" style="display:none;"></el-input>
							<el-input type="text" v-model="formDataB.itemText" placeholder="请输入名称" maxlength="32">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col span="12">
						<el-form-item label="字典值" prop="itemValue">
							<el-input type="" style="display:none;"></el-input>
							<el-input type="text" v-model="formDataB.itemValue" placeholder="请输入描述" maxlength="32">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col span="12">
						<el-form-item label="描述" prop="description">
							<el-input type="" style="display:none;"></el-input>
							<el-input type="text" v-model="formDataB.description" placeholder="请输入描述" maxlength="32">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col span="12">
						<el-form-item label="排序" prop="sortOrder">
							<el-input type="" style="display:none;"></el-input>
							<el-input type="number" v-model="formDataB.sortOrder" placeholder="请输入排序"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col span="24">
						<el-form-item style="text-align: right;">
							<el-button type="primary" icon="el-icon-folder" @click="submitEventNewC('formDataB')"
								:disabled="disabled" v-cloak>保存
							</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</vxe-modal>
		<el-aside width="30%" style="background-color: white;padding: 10px;">
			<el-button size="mini"  icon="el-icon-plus" @click="submitEventNewB" style="color: #409EFF;"><span style="color: #000000;">新增</span></el-button>
			<el-button size="mini"  icon="el-icon-edit-outline" @click="submitEventNewCp"  style="color: #409EFF;"><span style="color: #000000;">编辑</span></el-button>
			<el-button size="mini"  icon="el-icon-delete" @click="deleteDictDetail"  style="color: #409EFF;"><span style="color: #000000;">删除</span></el-button>
			<el-tree default-expand-all="true" expand-on-click-node="true" highlight-current="true" :data="treeData"
				:props="defaultProps" @node-click="handleNodeClick" style="margin-top:10px;margin-left:10px;"></el-tree>
			</div>
		</el-aside>
	</el-container>
</body>
<script type="text/javascript">
	window.onload = function () {
		let main = {
			data() {
				const data = [];
				return {
					treeData: [],
					NodeIdA: [],
					NodeId: [],
					userId: '',
					checkedNodeId: 0,
					tableFontSize: '12px',
					FontSize: '12px',
					//排序
					prop: '',
					order: '',
					selected: [],
					loading: false,
					disabled: false,
					visible: false,
					roleOptions: [],
					tableHeight: '100%',
					tablePage: {
						perfect: true,
						total: 0,
						currentPage: 1,
						pageSize: 20,
						align: 'left',
						pageSizes: [10, 20, 30, 50],
						layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
							'Total'
						],
					},
					roletablePage: {
						perfect: true,
						total: 0,
						currentPage: 1,
						pageSize: 20,
						align: 'left',
						pageSizes: [10, 20, 30, 50],
						layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
							'Total'
						],
					},
					tableLoading: false,
					gridData: [],
					gridDataA: [],
					roleGridData: [],
					orgOptions: [],
					tableToolbar: {
						id: 'toolbar',
						size: 'mini',
						perfect: true,
						buttons: []
					},
					tableExport: {
						filename: 'export',
						sheetName: 'Sheet1',
						type: 'xlsx',
						// 自定义类型
						types: ['xlsx', 'csv', 'html', 'xml', 'txt']
					},
					tableRadio: {
						trigger: 'row',
						highlight: true
					},
					submitLoading: false,
					selectRow: null,
					showEdit: false,
					showEditA: false,
					showEditB: false,
					showEditC: false,
					addRole: false,
					queryData: {
						dictCode: "",
						dictName: "",
						description: ""
					},
					roleformData: {
						dictCode: "",
					},
					roleformRules: {
						roleId: [{
							required: true,
							message: '请选择角色'
						}],
						departId: [{
							required: true,
							message: '请选择部门'
						}]
					},
					formData: {
						dictCode: "",
						dictName: "",
						description: "",
						createTime: "",
						createBy: ""
					},
					formDataA: {
						dictId: "",
						itemText: "",
						itemValue: "",
						description: "",
						parentId: "",
						sortOrder: 1
					},
					formDataB: {
						dictId: "",
						itemText: "",
						itemValue: "",
						description: "",
						parentId: "",
						sortOrder: 1
					},
					formRules: {
						dictCode: [{
								required: true,
								message: '请输入字典编码'
							},
							{
								min: 1,
								max: 32,
								message: '长度在1到32个字符'
							}
						],
						dictName: [{
								required: true,
								message: '请输入名称'
							},
							{
								min: 1,
								max: 50,
								message: '长度在1到50个字符'
							}
						],
						description: [{
								required: false,
								message: '请输入描述'
							},
							{
								min: 1,
								max: 100,
								message: '长度在1到100个字符'
							}
						],
						dictId: [{
								required: true,
								message: '请输入字典类型ID'
							},
							{
								min: 1,
								max: 100,
								message: '长度在1到100个字符'
							}
						],
						itemText: [{
								required: true,
								message: '请输入字典名称'
							},
							{
								min: 1,
								max: 100,
								message: '长度在1到100个字符'
							}
						],
						itemValue: [{
								required: true,
								message: '请输入字典值'
							},
							{
								min: 1,
								max: 100,
								message: '长度在1到100个字符'
							}
						]

					},
					data: JSON.parse(JSON.stringify(data)),
					data: JSON.parse(JSON.stringify(data)),
					defaultProps: {
						children: 'children',
						label: 'label'
					}
				}
			},
			created() {
				this.getRoleOptions();
				this.findList();
				this.getBtn();
				this.roleDepartList();
				this.tableFontSize = "12px";
			},
			mounted() {
				var that = this;
				this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 5;
				let settings = {
					async: {
					}
				}
				window.addEventListener('storage', (e) => {
					// console.log(e)
					that.tableFontSize = e.storageArea.tableFontSize;
				})
			},
			//使用递归吧表单数据转换为树行信息显示
			methods: {
				changeId(){
					// 表格发生改变时清空
				          console.log(111)
				          this.checkedNodeId = 0
				},
				searchEventB() {
						this.roleDepartList();
				},
				searchEventA() {
						this.queryData.dictName = "";
						this.roleDepartList();
				},
				handleNodeClick(data) {
					this.checkedNodeId = data.id;
					// console.log(data)
				},
				getTreeDataA(data) {
					data.forEach(function (item) {
						delete item.children;
					});
					var map = {};
					data.forEach(function (item) {
						map[item.id] = item;
					});
					var val = [];
					data.forEach(function (item) {
						var parent = map[item.parentId];
						if (parent) {
							(parent.children || (parent.children = [])).push(item);
						} else {
							val.push(item);
						}
					});
				},
				getTreeData(data) {
					for (let i = 0; i < data.length; i++) {
						if (data[i].children.length < 1) {
							// children若为空数组，则将children设为undefined
							data[i].children = undefined;
						} else {
							// children若不为空数组，则继续 递归调用 本方法
							this.getTreeData(data[i].children);
						}
					}
					return data;
				},
				getTree(params) {
					let that = this
					webApi('/dict/getDictDetailTreeList', 'post', params, function (data) {
						that.treeData = [];
						if (data.data.length > 0) {
							for (var i = 0; i < data.data.length; i++) {
								that.treeData.push(data.data[i]);
							}
						}
					}, function () {})
				},
				//点击时动态加载右侧树
				cellClick({
					row
				}) {
					let params = {
						dictId: row.id
					};
					let that = this;
					this.getTree(params);
				},

				getBtn() {
					this.tableToolbar.buttons = []
					let bts = Tool.getButton()
					let btns = []
					this.tableToolbar.buttons = btns.concat(bts)
				},
				handlePageChange({
					currentPage,
					pageSize
				}) {
					this.tablePage.currentPage = currentPage
					this.tablePage.pageSize = pageSize
					this.findList()
				},
				//获取列表信息
				findList() {
					this.tableLoading = true;
					let params = Object.assign({
						page: this.tablePage.currentPage,
						rows: this.tablePage.pageSize,
						keyword: this.queryData.dictName
					})
					let that = this;
					webApi('/dict/getDictList', 'post', params, function (data) {
						that.gridData = data.data.rows;
						that.tablePage.total = data.data.total;
						that.tableLoading = false;
					}, function () {
						that.tableLoading = false;
					})
				},
				//查询
				roleDepartList() {
					this.roletableLoading = true;
					let params = Object.assign({
						page: this.tablePage.currentPage,
						rows: this.tablePage.pageSize,
						keyword: this.queryData.dictName
					})
					let that = this;
					webApi('/dict/getDictList', 'post', params, function (data) {
						that.gridData = data.data.rows; //返回页面数据
						that.roletablePage.total = data.data.total; //分页
						that.roletableLoading = false; //分页
					}, function () {
						that.tableLoading = false;
					})
				},
				getDictDetail(id) {
					let that = this;
					webApi('/dict/getDictDetailInfo', 'post', {
						id: id
					}, function (data) {
						that.formDataB = data.data;
					}, function (xhr, type, errorThrown) {})
				},
				getRoleOptions() {
					let that = this;
					webApi('/role/getRoleOptions', 'post', {}, function (data) {
						that.roleOptions = that.getTreeData(data.data);
					}, function (xhr, type, errorThrown) {})
				},
				getOrgOptions() {
					let that = this;
					webApi('/org/getOrgOptions', 'post', {}, function (data) {
						if (data.code == 200) {
							that.orgOptions = that.getTreeData(data.data);
						} else {
							that.$message({
								message: data.msg,
								type: 'error',
								center: true
							});
						}
					}, function () {})
				},
				searchEvent(formName, acType) {
					let treeObj = $.fn.zTree.getZTreeObj("ztree");
					let nodes = treeObj.getCheckedNodes(true);
					if (acType == 0) {
						this.tablePage.currentPage = 1
						this.queryData = {
							userCode: "",
							userName: "",
							departId: nodes.length >= 1 ? nodes[0].departId : ''
						}
						// this.$refs[formName].resetFields();
					} else {
						this.queryData.departId = nodes.length >= 1 ? nodes[0].departId : '';
					}
					this.findList()
				},
				formatDate({
					cellValue
				}) {
					return XEUtils.toDateString(cellValue, 'yyyy-MM-dd')
				},
				toolbarButtonClickEvent({
					code
				}, event) {
					switch (code) {
						case 'reset':
							this.queryData.dictName = "";
							this.findList();
							break;
						case 'search':
							this.roleDepartList();
							break;
						case 'btnInsert':
							this.insertEvent();
							break;
						case 'btnUpdate':
							var selectedRow = this.$refs.xGrid.getRadioRecord();
							if (selectedRow != null) {
								this.editEvent(selectedRow);
							}
							else {
								// console.log(123)
								this.$message({
									message: "请选择一行数据",
									type: 'warning',
									center: true
								});
							}
							break;
						case 'btnDelete':
							let row = this.$refs.xGrid.getRadioRecord();
							if (row!=null) {
								this.removeEvent(row);
							} else {
								this.$message({
									message: "请选择需要删除的数据行",
									type: 'warning',
									center: true
								});
							}
							break;
						case 'btnExport':
							this.$refs.xGrid.exportData({
								filename: '菜单列表',
								sheetName: 'Sheet1',
								type: 'xlsx'
							});
							break;
					}
				},
				insertEvent() {
					this.isEdit = true
					this.formData = {
						dictCode: "",
						dictName: "",
						description: "",
					};
					this.selectRow = null;
					this.showEdit = true;
				},
				//新增的接口
				submitEvent(formName) {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.submitLoading = true;
							this.disabled = true;
							let params = Object.assign(this.formData);
							let that = this
							webApi('/dict/insertDict', 'post', params, function (data) {
								if (data.code == 200) {
									that.findList()
									that.$message({
										message: data.msg,
										type: 'success',
										center: true
									});
									that.showEdit = false;
								} else {
									that.$message({
										message: data.msg,
										type: 'error',
										center: true
									});
								}
								that.disabled = false;
							}, function (xhr, type, errorThrown) {})
							this.submitLoading = false;
							that.disabled = true;
						} else {
							return false;
						}
					});
				},
				//编辑的接口
				submitEventNew(formName) {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.submitLoading = true;
							this.disabled = true;
							let params = Object.assign(this.formData);
							params.id = this.selectRow.id;
							let that = this
							webApi('/dict/updateDict', 'post', params, function (data) {
								if (data.code == 200) {
									that.findList()
									that.$message({
										message: data.msg,
										type: 'success',
										center: true
									});
									that.showEditA = false;
								} else {
									that.$message({
										message: data.msg,
										type: 'error',
										center: true
									});
								}
								that.disabled = false;
							}, function (xhr, type, errorThrown) {})
							this.submitLoading = false;
							that.disabled = true;
						} else {
							return false;
						}
					});
				},
				//树状图新增的接口
				submitEventNewA(formName) {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.submitLoading = true;
							this.disabled = true;
							let params = Object.assign(this.formDataA);
							let that = this
							//获取左侧勾选项
							var selectedRow = this.$refs.xGrid.getRadioRecord();
							if (selectedRow == null) {
								that.$message({
									message: '请选择字典类型！',
									type: 'warn',
									center: true
								});
								this.submitLoading = false;
								return false;
							} else {
								params.dictId = selectedRow.id;
							}
							params.parentId = this.checkedNodeId;
							webApi('/dict/insertDictDetail', 'post', params, function (data) {
								if (data.code == 200) {
									let pp = {
										dictId: params.dictId
									};
									that.getTree(pp);
									that.$message({
										message: data.msg,
										type: 'success',
										center: true
									});
									that.showEditB = false;
								} else {
									that.$message({
										message: data.msg,
										type: 'error',
										center: true
									});
								}
								that.disabled = false;
							}, function (xhr, type, errorThrown) {})
							that.submitLoading = false;
							that.disabled = true;
						} else {
							return false;
						}
					});
				},
				//树状图修改接口
				submitEventNewC(formName) {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.submitLoading = true;
							this.disabled = true;
							let params = Object.assign(this.formDataB);
							//params.id = arr[arr.id]
							let that = this
							//获取左侧勾选项
							var selectedRow = this.$refs.xGrid.getRadioRecord();
							if (selectedRow == null) {
								that.$message({
									message: '请选择字典类型！',
									type: 'warn',
									center: true
								});
								this.submitLoading = false;
								return false;
							} else {
								params.dictId = selectedRow.id;
							}

							params.id = this.checkedNodeId;
							webApi('/dict/updateDictDetail', 'post', params, function (data) {
								if (data.code == 200) {
									let pp = {
										dictId: params.dictId
									};
									that.getTree(pp);
									that.$message({
										message: data.msg,
										type: 'success',
										center: true
									});
									that.showEditC = false;
								} else {
									that.$message({
										message: data.msg,
										type: 'error',
										center: true
									});
								}
								that.disabled = false;
							}, function (xhr, type, errorThrown) {})
							that.submitLoading = false;
							that.disabled = true;
						} else {
							return false;
						}
					});
				},
				//树状图新增的弹窗点击事件
				submitEventNewB() {
					this.formDataA = {
						sortOrder : "",
						itemText : "",
						itemValue : "",
						description : ""
					}
					var selectedRow = this.$refs.xGrid.getRadioRecord();
					if (selectedRow != null) {
						this.showEditB = true;
					} else {
						this.$message({
							message: "请选择字典类型！",
							type: 'warning',
							center: true
						});
					}
				},
				//点表格点击事件
				xModalA({
					row
				}) {
				},
				//树状图修改的弹窗点击事件
				submitEventNewCp() {
					if (this.checkedNodeId == 0) {
						that.$message({
							message: '请选择一个字典项！',
							type: 'error',
							center: true
						});
						return false;
					} else {
						//绑定数据
						this.getDictDetail(this.checkedNodeId);
						this.showEditC = true;
					}
				},
				closeEvent(formName) {
					this.showEditA = false;
					this.showEdit = false;
				},
				resetEvent(formName){
					this.formData = {
						dictCode: "",
						dictName: "",
						description: "",
					};
				},
				editEvent(row) {
					this.formData = {
						dictName: row.dictName,
						dictCode: row.dictCode,
						description: row.description
					};
					this.selectRow = row;
					this.showEditA = true;
				},
				removeEvent(row) {
					this.$XModal.confirm('您确定要删除该数据?').then(type => {
						if (type === 'confirm') {
							this.submitLoading = true;
							let ids = ""
							ids=row.id;
							let params = Object.assign({
								id: ids
							});
							let that = this;
							webApi('/dict/deleteDict', 'post', params, function (data) {
								if (data.code == 200) {
									that.findList()
									that.$message({
										message: data.msg,
										type: 'success',
										center: true
									});
									that.showEdit = false;
								} else {
									that.$message({
										message: data.msg,
										type: 'error',
										center: true
									});
								}
							}, function (xhr, type, errorThrown) {})
							this.submitLoading = false;
						}
					});
				},
				//删除字典项
				deleteDictDetail() {
					let that = this;
					if (that.checkedNodeId == 0) {
						that.$message({
							message: '请选择一个字典项！',
							type: 'error',
							center: true
						});
					} else {
						var selectedRow = this.$refs.xGrid.getRadioRecord();
						let dictId = 0;
						if (selectedRow != null) {
							dictId = selectedRow.id;
						}
						let keyPair = {
							dictId: dictId
						};
						this.$XModal.confirm('您确定要删除字典项?').then(type => {
							if (type === 'confirm') {
								that.submitLoading = true;
								let params = Object.assign({
									id: that.checkedNodeId
								});
								webApi('/dict/deleteDictDetail', 'post', params, function (data) {
									if (data.code == 200) {
										that.getTree(keyPair);
										that.$message({
											message: data.msg,
											type: 'success',
											center: true
										});
										that.showEdit = false;
									} else {
										that.$message({
											message: data.msg,
											type: 'error',
											center: true
										});
									}
								}, function (xhr, type, errorThrown) {})
								this.submitLoading = false;
							}
						});
					}

				},
				cellDBLClickEvent({
					row
				}) {
					this.editEvent(row);
				},
				//表头列排序
				tableSortChange(column, prop, order) {
					//点击排序按钮后拿到column.order，可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据
					// console.log(column + '---' + column.prop + '---' + column.order)
					this.order = column.order;
					this.prop = column.prop;
					this.findList();
				}
			}
		};

		let vue = Vue.extend(main);
		new vue().$mount('#app');
	}
</script>

</html>